<template>
    <div id="container">
        <div id="viewDiv"></div>
        <el-main style="position:absolute;top:15px;left:15px;background-color:white;width:330px;">
            <div style="width:100%">
                <el-button plain type="primary" @click="click('多段线')"> 多段线</el-button>
                <el-button plain  type="primary" @click="click('多边形')"> 多边形</el-button><br/>
            </div>
            <div style="width:100%;margin-top:15px">
                <el-tag size="large" type="success" style="width:100%">{{message}}</el-tag>
                <span></span>
            </div>
        </el-main>
    </div>
</template>
   
<script setup>
import {onMounted,ref} from 'vue'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import SketchViewModel from '@arcgis/core/widgets/Sketch/SketchViewModel'
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer' 
import * as projection from "@arcgis/core/geometry/projection"
import * as geometryEngine from '@arcgis/core/geometry/geometryEngine'
var map,view,sketchViewModel,graphicsLayer
const message=ref("")
var click=(event)=>{
    switch(event){
        case "多边形":
            view.graphics.removeAll()
            sketchViewModel.create("polygon", { mode: "click" })
            break
        case "多段线":
            view.graphics.removeAll()
            sketchViewModel.create("polyline", { mode: "click" })
            break
    }
}
onMounted(()=>{
    graphicsLayer=new GraphicsLayer()
    map = new Map({//创建地图对象
        basemap:"satellite",
        layers:[graphicsLayer]
    })
    view = new MapView({//创建地图视图对象
        map: map, container: "viewDiv",center:[120,36],zoom:15,
        constraints:{
            rotationEnabled:false,
            maxScale:2000,
        },
        spatialReference:{wkid:3857}
    })
    view.ui.remove(["zoom","attributes"])
    sketchViewModel = new SketchViewModel({//创建草图工具小部件
        view:view,
        layer: view.graphics,
        polylineSymbol:{
            type:"simple-line",
            color:[60,160,250],
            width:5,
            cap:"round",
            outline:{
                color:[255,255,255],
                width:1
            }
        },
        polygonSymbol:{
            type:"simple-fill",
            color:[60,160,250,0.3],
            outline:{
                color:[50,50,200],
                width:2
            }
        }
    })
    sketchViewModel.on("create", function (event) {//草图工具对象的create事件绑定回调函数
        if (event.state === "complete") {
            计算并显示面积或长度(event);
        }
    })
    projection.load()//加载projection的相关依赖项
    function 计算并显示面积或长度(event){
        var outGeometry=projection.project(event.graphic.geometry,{wkid:4549})
        if(event.graphic.geometry.type==="polygon"){
            var 面积= geometryEngine.planarArea(outGeometry)
            var 周长=geometryEngine.planarLength(outGeometry)
            message.value='面积: '+面积.toFixed(3)+'平方米 | 周长:'+周长.toFixed(3)+'米';
            console.log(geometryEngine.geodesicArea(event.graphic.geometry))
            console.log(geometryEngine.geodesicLength(event.graphic.geometry))
        }else if(event.graphic.geometry.type==="polyline"){
            var 长度=geometryEngine.planarLength(outGeometry,"meters")
            message.value='长度:'+长度.toFixed(3)+'米'
            console.log(geometryEngine.geodesicLength(event.graphic.geometry))
        }
    }
})
</script>

<style scoped>
    #container,#viewDiv{
    width:100%; height:100%; padding:0;margin:0;
    }
    span{
        white-space: pre-line;
        color:rgb(100,100,100)
    }
</style>
